<template>
  <el-row>
    <!--  服务信息   -->
    <el-col>
      <el-col :span="21" v-if="serviceInfo && serviceInfo['resourceId']">
        <el-descriptions v-if="'99'===serviceInfo['serStatus']||'9'===serviceInfo['serStatus']"
                         title="服务信息"
                         :column="2"
                         :labelStyle="{width:'100px'}"
                         border>
          <el-descriptions-item label="服务名称">
             <span v-if="'5'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-input v-model="editTest"
                            maxlength="50"
                            show-word-limit
                            placeholder="服务名称"
                            size="small"
                            clearable></el-input>
                </el-col>
                 <el-col :span="7">
                   <el-button @click="edit('serName')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                 </el-col>
              </el-row>
            </span>
            <span v-else>
              <span>{{ serviceInfo['serName'] }}</span>
              <span v-if="'2'===serviceInfo['publishMode']" class="el-icon" @click="editId='5'"><i
                  class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="发行形式">
            <span v-if="'1'===serviceInfo['publishMode']">内部发布</span>
            <span v-else>外部发布</span>
          </el-descriptions-item>
          <el-descriptions-item label="数据类型">
            <span v-if="'2'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-select v-model="editTest"
                             size="small"
                             placeholder="请选择"
                             style="width: 100%">
                    <el-option
                        v-for="item in mapDataType"
                        :key="item['dictKey']"
                        :label="item['dictValue']"
                        :value="item['dictKey']">
                    </el-option>
                    <el-option v-if="'2'===serviceInfo['publishMode']"
                               key="0"
                               label="其他"
                               value="0">
                    </el-option>
                  </el-select>
                  <el-input v-model="editTestElse"
                            v-if="'0'===editTest"
                            maxlength="30"
                            show-word-limit
                            placeholder="其他坐标系"
                            size="small"
                            clearable></el-input>
                </el-col>
                 <el-col :span="7">
                   <el-button @click="edit('mapType')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                 </el-col>
              </el-row>
            </span>
            <span v-else>
              <span v-if="'0'===serviceInfo['mapType']">{{ serviceInfo['mapTypeElse'] }} </span>
              <span v-else> {{ formatterMapDataType({cellValue: serviceInfo['mapType']}) }}</span>
              <span class="el-icon" @click="editId='2'"><i class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="高程">
            <span v-if="'3'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-input v-model="editTest"
                            maxlength="50"
                            show-word-limit
                            placeholder="高程"
                            size="small"
                            clearable></el-input>
                </el-col>
                 <el-col :span="7">
                   <el-button @click="edit('mapElevation')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                 </el-col>
              </el-row>
            </span>
            <span v-else>
              {{ serviceInfo['mapElevation'] }}
              <span class="el-icon" @click="editId='3'"><i class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="坐标系">
            <span v-if="'1'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-select v-model="editTest"
                             size="small"
                             placeholder="请选择"
                             style="width: 100%">
                    <el-option
                        v-for="item in mapCsys"
                        :key="item['dictKey']"
                        :label="item['dictValue']"
                        :value="item['dictKey']">
                    </el-option>
                    <el-option v-if="'2'===serviceInfo['publishMode']"
                               key="0"
                               label="其他"
                               value="0">
                    </el-option>
                  </el-select>
                  <el-input v-model="editTestElse"
                            v-if="'0'===editTest"
                            maxlength="30"
                            show-word-limit
                            placeholder="其他坐标系"
                            size="small"
                            clearable></el-input>
                </el-col>
                 <el-col :span="7">
                   <el-button @click="edit('mapCsys')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                 </el-col>
              </el-row>
            </span>
            <span v-else>
              <span v-if="'0'===serviceInfo['mapCsys']">{{ serviceInfo['mapCsysElse'] }} </span>
              <span v-else> {{ formatterMapCsys({cellValue: serviceInfo['mapCsys']}) }}</span>
              <span class="el-icon" @click="editId='1'"><i class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="服务状态">
            {{ formatterSerStatus({cellValue: serviceInfo['serStatus']}) }}
          </el-descriptions-item>
          <el-descriptions-item v-if="'2'===serviceInfo['publishMode']"
                                :span="2"
                                label="发行地址">
            <span v-if="'4'===editId">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-input v-model="editTest"
                            maxlength="50"
                            show-word-limit
                            placeholder="发行地址"
                            size="small"
                            clearable></el-input>
                </el-col>
                 <el-col :span="7">
                   <el-button @click="edit('publishSite')"
                              type="success"
                              icon="el-icon-check"
                              circle
                              size="mini"></el-button>
                   <el-button @click="editId='0';editTest='';"
                              type="danger"
                              icon="el-icon-close"
                              circle
                              size="mini"></el-button>
                 </el-col>
              </el-row>
            </span>
            <span v-else>
               {{ serviceInfo['publishSite'] }}
              <span class="el-icon" @click="editId='4'"><i class="el-icon-edit"></i></span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="代理地址" :span="2">
            {{ serviceInfo['proxyUrl'] }}
          </el-descriptions-item>
        </el-descriptions>
        <!--   服务信息未选择      -->
        <el-descriptions v-else
                         title="服务信息"
                         :column="1"
                         :labelStyle="{width:'100px'}"
                         border>
          <el-descriptions-item label="服务状态">
            {{ formatterSerStatus({cellValue: serviceInfo['serStatus']}) }}
            <el-button v-if="'2'===serviceInfo['serStatus']" type="text" @click="selectFile">选择</el-button>
            <i class="fa fa-refresh fa-spin"></i>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="17" v-else>
        <el-descriptions title="服务信息" :column="1" :colon="false">
          <el-descriptions-item>未发现相关服务，请先添加服务
            <el-button size="mini" type="primary" @click="isShowResourceUpload=true">添加服务</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-col>

    <!--  资源文件上传  -->
    <ResourceUpload :is-show.sync="isShowResourceUpload"
                    :service-type="1"
                    @save-end="getServerInfo"
                    @too-file="selectFile"
                    :data-type="mapDataType">
    </ResourceUpload>
    <!--  资源选择  -->
    <ResourceSelect :data-list="resourceSelectList"
                    :is-show.sync="resourceSelectModal"
                    @user-select="userResourceSelect">
    </ResourceSelect>
  </el-row>
</template>

<script>
import {
  resourceDict,
  queryResourceItemMap,
  queryResourceItemMapFile,
  updatedMap,
  updatedMapInfo
} from "@/api/resources-center/service";
import ResourceUpload from "@/views/data-center/ResourceUpload";
import ResourceSelect from "@/views/data-center/ResourceSelect";

/**
 * {地图服务信息}
 *
 * @author: 宋康
 * @date: 2023/2/13
 */
export default {
  name: "MapServiceInfo",
  mixins: [resourceDict],
  components: {ResourceUpload, ResourceSelect},
  props: {
    rid: {
      type: String,
      required: true
    },
    csysList: {
      type: Array,
      required: true
    },
    serStatusList: {
      type: Array,
      required: true
    },
    typeList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      resourceId: '',
      resourceSelectModal: false,
      resourceSelectList: [],
      isShowResourceUpload: false,
      serviceInfo: null,
      editId: '0',
      editTest: '',
      editTestElse: '',
    }
  },
  methods: {
    /**
     * {获取选择文件}
     *
     * @author: 宋康
     * @date: 2023/2/11
     */
    selectFile() {
      this._debounce(() => queryResourceItemMapFile(this.resourceId).then(res => {
        if (res.status) {
          this.resourceSelectList = res.data;
          this.resourceSelectModal = true;
        }
      }), 200)
    },
    /**
     * {用户选择完资源后触发}
     *
     * @author: 宋康
     * @date: 2023/2/11
     */
    userResourceSelect(val) {
      this._debounce(() => updatedMap(this.resourceId, val).then(res => {
        if (res.status) {
          this.getServerInfo();
        }
      }), 500)
    },
    /**
     * {获取服务信息}
     *
     * @author: 宋康
     * @date: 2023/2/9
     */
    getServerInfo() {
      if ('' !== this.resourceId) {
        this._debounceT("aZoN5ijp", queryResourceItemMap(this.resourceId).then(res => {
          if (res.status) {
            this.serviceInfo = res.data;
            if (res.data.resourceId) {
              // 每30秒查询一次
              if ('2' !== this.serviceInfo['serStatus'] && '99' !== this.serviceInfo['serStatus'] && '9' !== this.serviceInfo['serStatus']) {
                this._debounceT("EU2C6rXR", () => {
                  this.getServerInfo()
                }, 30000)
              }
            }
          }
        }), 500)
      }
    },
    /**
     * {更新编辑}
     * @param type
     * @param fieldName
     * @author: 宋康
     * @date: 2023/2/13
     */
    edit(fieldName) {
      if (this.$XEUtils.isEmpty(this.editTest.trim())) {
        this.$message.error('修改信息不可为空');
        return;
      }
      this._debounceT("6L9NLIdy", () => updatedMapInfo(this.resourceId, fieldName, this.editTest, this.editTestElse).then(res => {
        if (res.status) {
          this.$message.success("修改完成");
          this.editId = '0';
          this.editTest = '';
          this.editTestElse = '';
          this.getServerInfo();
        } else {
          this.$message.error(res.msg);
        }
      }), 500)
    }
  },
  mounted() {
    this.resourceId = this.rid;
    this.mapCsys = this.csysList;
    this.serStatus = this.serStatusList;
    this.mapDataType = this.typeList;
    this.getServerInfo();
  },
  watch: {
    rid(n) {
      this.resourceId = n;
      this.getServerInfo();
    },
    csysList(n) {
      this.mapCsys = n;
    },
    serStatusList(n) {
      this.serStatus = n;
    },
    typeList(n) {
      this.mapDataType = n;
    }
  }
}
</script>

<style lang="scss" scoped>
.el-icon {
  margin-left: 10px;

  &:hover {
    color: #3f88e7;
    cursor: pointer;
  }
}
</style>